page{
	padding-top: 0;
	padding-bottom: 180upx;
}

.hs-panel {
	margin-top: 10px;
	padding: 0 1rem;
	background-color: #fff;

	.hs-panel-head {
		display: flex;
		font-size: 15px;
		height: 44px;
		align-items: center;
		font-weight: 700;
	}
}

.hs-list-item {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 10px 0;
	border-top: 1px solid #ebedf0;

	.hs-list-item-left {
		color: #323233;
		flex: 1;
		text-align: left;
		font-size: 14px;
	}
	.hs-list-item-right {
		flex: 1;
		text-align: right;
		font-size: 13px;
		color: #999;
	}
}

.hs-table {
	.hs-table-row {
		font-size: 13px;
		display: flex;
		padding: 10px 0;
		border-top: 1px solid #ebedf0;
		.hs-table-col {
			flex: 1;
		}

		.hs-table-col.title {
			flex: 0 5rem;
		}

		.hs-table-col.center {
			text-align: center;
		}
	}
}

.remark {
	.remark-title {
		padding: 10px 0;
		color: #323233;
		font-size: 14px;
	}
	.remark-content {
		padding: 10px 0 1rem;
		font-size: 13px;
		color: #999;
	}
}

.hs-image-group {
	.hs-image-title {
		padding: 10px 0;
		color: #323233;
		font-size: 14px;
	}
	.hs-image-box {
		padding: 10px 0;
		
		.img {
			width: 30px;
			height: 30px;
		}
	}
}

.hs-list-border-top {
	border-top: 1px solid #ebedf0;
}


.order_btn{
	
 	width: 80%;
 	background: #007AFF !important;
 	border-radius: 30upx;
 	border: none;
 	color: #FFFFFF!important;
 	position: fixed!important;
 	left: 50%;
	margin-left: -40%;
 	bottom: 50upx;
	z-index: 100;
 }
.hotelService{
	width: 100%;
	height: auto;
	background: #f4f4f4;
	.title{
		width: 100%;
		height: 73upx;
		box-sizing: border-box;
		padding: 0 33upx;
		font-size:24upx;
		background:#F6F6F6;
		line-height: 73upx;
		.name{
			width: auto;
			display: block;
			float: left;
		}
		.delete{
			width: 100upx;
			display: block;
			float: right;
			color: #406CEB;
		}
	}
	.content{
		width: 100%;
		height: auto;
		
		.box{
			background: #FFFFFF;
			width: 100%;
			padding: 25upx 32upx;
			margin: 20upx 0 20upx 0;
			box-sizing: border-box;
			// border-bottom: 1upx solid #EEEEEE;
			font-size: 30upx;
			color: #333333;
			display: flex;
			justify-content: space-between;
			align-items: center;
			position: relative;
			text{
				display: inline-block;
				text-align: left;				
				color: #333333;						
				word-break:keep-all; /* 不换行 */
				white-space:nowrap; /* 不换行 */				
			}
			input{			
				text-align: right;
				color: #333333;
			}
			
			.choose{
				display: flex;
				align-items: center;
				padding: 0;
				text{
					font-size: 30upx;
					color: #999999;
					margin-right:20upx;
				}
				image{
					width: 40upx;
					height: 40upx;
				}
			}
		}
		.remark{
			width: 100%;
			min-height: 154upx;
			padding: 36upx 32upx 0 32upx;
			box-sizing: border-box;
			margin-bottom: 24upx;
			background: #FFFFFF;
			text{
				// width: 60upx;
				// height: 112upx;
				font-size: 30upx;
				color: #333333;
				// float: left;
			}
			textarea{
				// width: 560upx !important;
				height: 112upx;
				display: block;
				font-size: 28upx;
				color: #999999;
				// float: right;
			}
			}
	}
	.icon{
		position: absolute;
		right: 2%;
		top:50%;
		transform: translateY(-50%);
		
	}
	.addDetail{
		width: 100%;
		height: 88upx;
		color: #406CEB;
		font-size: 30upx;
		line-height: 88upx;
		text-align: center;
		border-top: 1upx solid #eeeeee;
	}
}
.info_box{
	width: 100%;
	height: auto;
	background: #FFFFFF;
	padding: 20upx 30upx 40upx 30upx;
	box-sizing: border-box;
	border-top:1upx solid #eeeeee;
	.name{
		width: 100%;
		height: 52upx;
		display: flex;
		align-items: center;
		font-size: 26upx;
		color: #666666;
	}
	.con{
		width: 100%;
		height: 52upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 26upx;
		position: relative;		
		input{
			width: 200upx;
			font-size: 28upx;
		}
		.txt1{
			width: auto;
			height: 100%;
			display: block;
			line-height: 52upx;
			color: #999999;
			float: left;
		}
		.txt2{
			width: auto;
			height: 100%;
			display: block;
			line-height: 52upx;
			color: #666666;
			position: absolute;
			right: 0;
		}
	}
	.remark{
		width: 100%;
		height: auto;
		font-size: 26upx;
		margin-top: 20upx;
		.txt1{
			width: 100%;
			height: 40upx;
			color: #999999;
			line-height: 40upx;
		}
		.txt2{
			width: 100%;
			height: 200upx;
			line-height: 32upx;
			padding-top:10upx;
			box-sizing: border-box;
			font-size: 26upx;
			color: #666666;
			word-break: break-all;  /* break-all(允许在单词内换行。) */
		    text-overflow: ellipsis;  /* 超出部分省略号 */
			display: -webkit-box; /** 对象作为伸缩盒子模型显示 **/
			-webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
			-webkit-line-clamp: 2; /** 显示的行数 **/
			overflow: hidden;
		}
	}
}



/* ///审批流程 */
.approval{
	width: 100%;
	height: auto;
	text{
		width: 100%;
		height: 28upx;
		display: block;
		font-size:30upx;
		color: #999999;
		margin-bottom: 50upx;
		padding: 32upx 44upx 0 44upx;
		box-sizing: border-box;
	}
	}
.approver{
	width: 100%;
	height: auto;
	.box{
		width: 100%;
		height: 158upx;
		border-bottom: 1upx solid #eeeeee;
		box-sizing: border-box;
		padding: 0 32upx;
		position: relative;
		.circle{
			width: 25upx;
			height: 25upx;
			background: #D3D3D3;
			border-radius: 50%;
			position: absolute;
			left: 30upx;
			top: 70upx;
		}
		.left{
			  width: 350upx;
			  min-height: 100upx;
			  white-space:normal ;
			  font-size: 32upx;
			  color: #333333;
			  margin-left: 57upx;
			  float: left;
			  
			  .view_text{
				  width: auto;
				  height: auto;
				  display: block;
				  font-size: 26upx;
				  color: #999999;
				  padding: 0;
				  word-break: break-all;
				  text-overflow: ellipsis;
				  display: -webkit-box; /** 将对象作为伸缩盒子模型显示 **/
				  -webkit-box-orient: vertical; /** 设置或检索伸缩盒对象的子元素的排列方式 **/
				  -webkit-line-clamp: 2; /** 显示的行数 **/
				  overflow: hidden;  /** 隐藏超出的内容 **/				  			
			  }
			}
		.right{
			width: auto;
			height: 110upx;
            float: right;
			padding-top: 30upx;
			margin-right:10upx ;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;			
			.image{
				width: 71upx;
				height: 71upx;
				background:#D3D3D3;
				border-radius: 50%;
			}
			text{
				
				height: auto;
				display: block;
                font-size: 26upx;
				color: #999999;
				padding: 0;
				text-align: center;
			}
		}
	}
}

.frist_circle{
	width: 25upx;
	height: 25upx;
	background: #D3D3D3;
	border-radius: 50%;
	position: absolute;
	left: 30upx;
	top: 70upx;
}
.circle::after{
	content: '';
	width: 2upx;
	height: 135upx;
	display: block;
	background: #D3D3D3;
	position: absolute;
	left: 50%;
	bottom: 25upx;
}

.btn_bottom{
	width: 100%;
	height: 80upx;
	padding: 30upx;
	box-sizing: border-box;
	position: fixed;
	bottom: 0upx;
	left: 0upx;
	display: flex;
	justify-content:space-around;
	align-items: center;
	background: #FFFFFF;
	view{
		font-size: 28upx;
		padding: 5upx 10upx;
		background: #007AFF;
		color: #FFFFFF;
		
	}
}
.line{
	width: 100%;
	height: 20upx;
	background-color: #f4f4f4;
}
.active{
	color: #333333 !important;
}
.photo{
	width: 100%;
	height: auto;
    padding: 32upx 44upx;
	box-sizing: border-box;
	.img_list{
		display: flex;
		justify-content: left;
		flex-wrap: wrap;
	}
	text{
		width: 100%;
		display: inline-block;
		font-size: 30upx;
		color: #333333;
		margin-bottom: 10upx;
	}
	.addPic{
		position: relative;
		overflow: hidden;
		width: 88upx;
		height: 88upx;
		border: 1px solid #CCCCCC;
		margin-right: 20upx;
		image{
			width: 88upx;
			height: 88upx;
		}
	}
}

.left_box{	    
		position: fixed;
		right: 20upx;		
		top:40%;		
		border-bottom-left-radius: 25upx;
		border-top-left-radius: 25upx;
		background-color: #007AFF;				
		z-index: 9990;
		text{				
			display: inline-block;
			width: 35upx;
			writing-mode:tb-rl;
			padding: 30upx 15upx  20upx 15upx;
			color: #FFFFFF;
			font-size: 25upx ;								
			letter-spacing: 2upx;			
		}
	}